<template>
    <div class="">
        <el-dialog title="编辑走访" :visible.sync="dialog" width="30%" :before-close="dialogClose">
            <el-form ref="formData" :model="formData" label-width="100px">
				<el-form-item label="所属户档" prop="homeid">
				    <el-select v-model="formData.homeid" style="width: 100%;" placeholder="请选择所属户档">
				    	<el-option :label="item.header + '(' + item.sn + ')'" :value="item.id" v-for="(item, index) in Home"></el-option>
				    </el-select>
				</el-form-item>
                <el-form-item label="走访人姓名" prop="path">
                    <el-input v-model="formData.name" placeholder="请输入走访人姓名(多名)"></el-input>
                </el-form-item>
				<el-form-item label="职务" prop="path">
					<el-input v-model="formData.position" placeholder="请输入职务"></el-input>
				</el-form-item>			
				<el-form-item label="走访图" prop="img">
				    <el-upload
				      class="upload-demo"
				      :action="$baseUrl + 'Index/uploadImg'"
				      :on-remove="handleRemove"
				      :file-list="fileList"
					  :multiple="true"
					  :on-success="uploadSuccess"
				      list-type="picture">
				      <el-button size="small" type="primary">点击上传</el-button>
				      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				    </el-upload>
				</el-form-item>
            	<el-form-item>
            		<el-button @click="dialogClose">取 消</el-button>
            		<el-button type="primary" @click="formSubmit">确 定</el-button>
            	</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
	data() {
		return {
			dialog: false,
			formData: {
				id: 0,
				position: '',
				name:'',
				img: '',
			},
			Home:[],
			fileList:[],
			file:[],
			homeid:0
		}
	},
	created() {
	},
	watch: {
		dialog () {
			if(this.dialog && this.formData.id > 0){
				console.log('111')
				this.getData()	

			} else if(!this.dialog){
				this.clearFormData()
				this.$emit('getData')
			}
			this.getHome()
		}
	},
	methods: {
		dialogClose(){
			this.$emit('dialogToggle')
		},
		clearFormData () {
			this.file = []
			this.fileList = []
			for(let i in this.formData){
				if(i == 'id') {
					this.formData[i] = 0
				} else {
					this.formData[i] = ''
				}
			}
		},
		getHome () {
			this.$apiPost('House/getHome').then(res => {
				if(res.code == 1) {
					this.Home = res.data
					if(this.homeid){
						this.formData.homeid = parseInt(this.homeid)
					}
				}
			})
		},
		getData () {
			let t = this
			t.$apiPost('Familylog/infos', this.formData).then(res => {
				console.log('res', res)
				if(res.code == 1) {
					this.formData = res.data
					if(res.data.img){
						this.file = res.data.img.split(',')
						this.file.forEach(item=>{
							this.fileList.push({name:item.split('/')[item.split('/').length-1],url:(this.$imgUrl+item)})
						})
					}
				}
			})
		},
		// 保存编辑
		formSubmit() {
			if(this.file.length>0){
				this.formData.img = this.file.join(',')
			}
			this.$apiPost('Familylog/editData', this.formData).then(res => {
				if(res.code == 1) {
					this.$message(res.msg)
					this.dialogClose()
				} else {
					this.$message(res.msg)
				}
			})
		},
		  handleRemove(file, fileList) {
				this.removeOne(this.file,file.response.data)
				console.log(this.file)
		  },
		  uploadSuccess(file) {
			this.file.push(file.data)
			console.log(this.file)
		  },
		removeOne(arr,val){
			for (var i = 0; i < arr.length; i++) { 
				if (arr[i] == val){
					arr.splice(i, 1); 
				} 
			}
		}
	}
}
</script>
<style scoped>
	.mselect{
		width: 100%;
	}
	.mtdiv{
		margin-top: 10px;
		display: inline-block;
		width: 100%;
	}
	.mtdiv .mtdiv-v{
		float: left;
		width: 50%;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}
	.mtdiv .mtdiv-v label{
		float: left;
		margin-right: 10px;
	}
	.mtdiv .el-input{
		float: left;
		width: 80%;
		margin: 5px 0;
	}
</style>
